react-native android 初始化问题
最近开始接触rn,官方起手，装了一堆工具，然后启动项目的时候出现了一堆问题，这里针对我遇到的一些问题提供一些解决方案。本人开发环境mac，在启动ios的时候没啥大问题，可以直接启动，这里提示一点，因为可能会启动多个，所以可以在启动的时候指定端口，防止冲突react-native run-ios --port=xxxx...
2024-01-10
react native app微信分享 - android版
前言本文主要会涉及到以下内容:微信开发者应用申请审核安装配置微信分享库微信好友/朋友圈功能实现应用申请审核开始创建移动应用,填写应用名称,应用名称以及中英文的信息，移动应用图标分别为28x28何108x108的png格式图标。然后下一步填写iOS项目的bundle ID以及android项目的包名和应用签名。请...
2024-01-10
React Native for Android 学习
前言Facebook 在2015.9.15发布了 React Native for Android，把 JavaScript 开发技术扩展到了移动Android平台。基于React的React Native 让前端开发者使用 JavaScript 和 React 编写应用，利用相同的核心代码就可以创建 基于Web，iOS 和 Android 平台的原生应用。在React Native for Android出来之后，本人花了些时间从环境搭...
2024-01-10
Android Rreact Native 常见错误总结
Android Rreact Native 常见错误总结 1.invariant violation:expected a component class,got[object object] 创建自定义组件首字母要大写，否则会报错. 2.Module 0 is not a registered callable module. 将gradle升级成最新版本(cd Android 进入android目录执行:sudo ./gradlew clean) 或者通过android...
2024-01-10
react-navigation android 导航标题居中
先贴下代码供参考：安卓默认导航的titile 是在左侧的，为了和iOS保持一致，需要添加 alignSelf:'center',这个 属性 但是会遇到title有点偏右的情况添加headerRight 这个属性，就OK 了，仅此手记，供各位参考参考：https://github.com/react-community/react-navigation/issues/544...
2024-01-10
react-native 打包Android Release版本报错
RN项目，Debug版本可以正常运行，Release版本报错找了很多方面，一直没有解决，后来发现是多运行了一个命令导致的！！如下：请注意不要运行此命令后打包，否则一定回报资源错误！！！react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-...
2024-01-10
react-native icon使用方式
为什么80%的码农都做不了架构师？>>> 用的是antd官方带的antd icon组件,组件中的代码是这样写的:/** * Created by apple on 2017/12/30. */import React from 'react';import { Icon, Grid } from 'antd-mobile';const list = [ 'check-circle', 'check', 'check-circle-o', 'cross-circle', 'cross', 'cros...
2024-01-10
React Native App设置&Android版发布
React Native系列《逻辑性最强的React Native环境搭建与调试》 《ReactNative开发工具有这一篇足矣》 《解决React Native unable to load script from assets index.android.bundle on windows》 《React Native App设置&Android版发布》 一、设置APP信息1.设置包名、版本号目录：~/android/app/build.gradle2.设置应用名目录：~/android/app/sr...
2024-01-10
windows下react-native环境搭建
首先不得不先吐槽一下自己，一个坑总是踩很多次，且乐此不疲。咋办? 写博客记录记录呗。零、记录的点Java环境的下载与配置Android环境的下载与配置Node环境的下载与配置创建第一个react-native应用最终能够达到的目的：在手机上能够运行第一个React-Native应用~以备后用，已将安装包上传...
2024-01-10
windows下的react-native 开发环境搭建
本教程用安卓手机作为演示。首先安装jdk。本教程基于jdk1.8，安装时有一点要特别注意：jdk和jre必须装到不同目录下，否则初始化react-native项目时大概率报tools.jar not found exception。具体流程：先安装jdk到默认目录，第二次弹出选择路径对话框的时候先到jdk目录下删除jre文件夹，再安装jre到不同目录。...
2024-01-10
【react native】react navigation简述（3）
createStackNavigatorcreateStackNavigator类似于普通的navigator，屏幕上方导航栏createBottomTabNavigator屏幕下方标签栏createMaterialTopTabNavigator屏幕顶部的材料设计主题标签栏createDrawerNavigator抽屉效果，侧边划出createSwitchNavigator用途是一次只显示一个页面（跳转页面时候，第一个页面跳转到第...
2024-01-10
React-Native之打包发布(Android)
一,介绍与需求 移动端打包发布到应用市场二,发布配置注意：以下所有操作都在win10下进行,React Native版本0.59.5,android-studio 版本 3.21,生成签名1 keytool -genkey -v -keystore app.keystore -alias yingqi -keyalg RSA -keysize 2048 -validity 10000附加说明：-genkey 生成文件 -keystore 文件名 -alias 别名-keyalg ...
2024-01-10
React Native的android API -ReactAndroid开源项目
ReactAndroid是React Native的android开源项目；React Native源码：https://github.com/facebook/react-native/tree/master/ReactAndroidReact Native的Android API不同版本的React Native Android API和React Native Android源码；项目目录的node_modules\react-native\android\com\facebook\react\rea...
2024-01-10
react-native-tab-navigation
原文地址安装npm install react-native-tab-navigator --save引入import TabNavigator from 'react-native-tab-navigator'如下面所示：import React, { Component } from 'react';import { Platform, StyleSheet, Text, View, Image} from 'react-native';import TabNavigato...
2024-01-10
React-Native项目在Android真机上调试
目录1、确保你的设备已经成功连接。可以终端输入adb devices来查看:2、终端运行npm start 开启本地服务，成功后运行react-native run-android来在设备上安装并启动应用3、设置设备访问开发服务器3.1 (Android 5.0及以上)使用ad...
2024-01-10
react middleware详解
自：https://www.jianshu.com/p/f4166120489b?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation为什么dispatch需要middleware？middle.png上图表达的是 redux 中一个简单的同步数据流动的场景，点击 button 后，在回调中 dispatch 一个 action，reducer 收到 action 后，更新 state 并...
2024-01-10
Why React Is Favored by Front-End Specialists
In this section, we will discuss some of the features that make React a superior choice for front-end developers. Have a look:The Virtual DOM: As discussed above, React.js brought in the helpful Virtual DOM - a virtual browser infinite times friendlier tha...
2024-01-10
react-native scrollview触摸滚动事件
1、几个已知的滑动或者滑动开始结束的方法：onScroll：在滚动过程中, 每帧最多调用一次此函数, 调用的频率可以用scrollEventThrottle属性来控制.onMomentumScrollEnd：当一帧滚动完毕时调用.onScrollAnimationEnd ：ios上的当滚动动画结束时调用.2、还有其他的一些事件如下触摸事件里面有携带event，大家可以...
2024-01-10
【安卓】React Navigation 5.x详解
一、 React Navigation简介在多页面应用程序中，页面的跳转是通过路由或导航器来实现的。在RN应用开发过程中，早期的路由可以直接使用官方提供的Navigator组件，不过从0.44版本开始，Navigator被官方从react native的核心组件库中剥离出来，放到react-native-deprecated-custom-components的模块中，并且Navigator组件也不...
2024-01-10
Windows下配置React-native环境问题总结
从最近移动端市场的需求来看，Android原生开发已经危机重重，混合开发的大趋势已经越来越难以忽视了。不迎合趋势注定会被时代淘汰，因此选择了有FaceBook技术背书的Reactive Native作为混合开发的切入技术。这篇博客是开篇，后面会有系列文章记录学习Reactive Native的成长，希望能帮助到后来的人，尤其...
2024-01-10详解React Native监听Android回退按键与程序化退出应用
详解React Native监听Android回退按键与程序化退出应用前言我们知道Android回退按键，会控制页面返回， 并且退出应用并非真正意义退出，仍在后台运行，所以在某些场景下需要监控android回退按键，那么在React Native中应该如何应用呢？我们具体来看看。BackAndroid此模块用于监听硬件的back键操作。看下具...
2024-01-10
react 百度地图中信息框infoWindow再插入echart视图
需求是在红框中再插入一个echart视图总感觉并不能直接响应react组件，好像百度地图弹出框是另外一个封装的dom。在infoWindow中的代码是：var content =...'<div class="trendContent">' +'<p class="bule">趋势图</p>' +'<p class="unit">单位/K</p>' +'</div>' +'<div id="main"></div>' +'</div>';随便插入一个官方视图componentDidMount() {v...
2024-01-10
React Native 解决 Could not get BatchedBridge
Windows下做React Native开发，执行react-native run-android后，手机出现红屏提示： Could not get BatchedBridge, make sure your bundle is packaged correctly出现这种情况通常是电脑8081端口被占用导致的，因为React Native会在8081端口启动nodejs服务，手机端调试依赖此服务。可以看看是什么程序占用了8081端口： 1、执行netstat -aon|f...
2024-01-10
react typescript FunctionComponent antd crud
这个界面跟之前VUE做的一样。并无任何不同之处，只是用react重复实现了一遍。import React, { useState, useEffect } from 'react';import { Row, Col, Table, Form, Cascader, Input, Button, Modal, message } from 'antd';import { FormComponentProps } from 'antd/lib/form';import http from '../../serv...
2024-01-10
react-native开发异常处理——react-native run-android命令报错
学习交流：https://gitee.com/potato512/Learn_ReactNativereact-native学习交流QQ群：806870562在终端使用命令react-native run-android报错，如下图所示：其中说到No connected devices!，我便猜测是不是需要先打开android模拟器，于是就先启动android模拟器，再接着执行命令react-native run-android果然运行成功。...
2024-01-10
